<template>
  <div class="icons">
    <swiper>
      <swiper-slide>
        <div class="icon">
          <span class="iconfont" style="border-radius:.3rem;color: #fff;background-color: green; font-size: 1.2rem"  >&#xe783; </span>
          <p>热门景点</p>
        </div>
        <div class="icon">
          <span class="iconfont" style="border-radius:.3rem;color: #fff;background-color: darkcyan; font-size: 1.2rem">&#xe78d;</span>
          <p>热门景点</p>
        </div>
        <div class="icon">
          <span class="iconfont" style="border-radius:.3rem;color: #fff;background-color: deeppink; font-size: 1.2rem">&#xe7b2;</span>
          <p>热门景点</p>
        </div>
        <div class="icon">
          <span class="iconfont" style="border-radius:.3rem;color: #fff;background-color: purple; font-size: 1.2rem">&#xe784;</span>
          <p>热门景点</p>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="icon">
          <span class="iconfont" style="border-radius:.3rem;color: #fff;background-color: red; font-size: 1.2rem">&#xe782;</span>
          <p>热门景点</p>
        </div>
        <div class="icon">
          <span class="iconfont" style="border-radius:.3rem;color: #fff;background-color: orangered; font-size: 1.2rem">&#xe6eb;</span>
          <p>热门景点</p>
        </div>
        <div class="icon">
          <span class="iconfont" style="border-radius:.3rem;color: #fff;background-color: darkgreen; font-size: 1.2rem">&#xe7ae;</span>
          <p>热门景点</p>
        </div>
        <div class="icon">
          <span class="iconfont" style="border-radius:.3rem;color: #fff;background-color: red; font-size: 1.2rem">&#xe781;</span>
          <p>热门景点</p>
        </div>
      </swiper-slide>
    </swiper>
    <swiper>
      <swiper-slide>
        <div class="icon">
          <span class="iconfont" style="border-radius:.3rem;color: #fff;background-color: green; font-size: 1.2rem"  >&#xe783; </span>
          <p>热门景点</p>
        </div>
        <div class="icon">
          <span class="iconfont" style="border-radius:.3rem;color: #fff;background-color: darkcyan; font-size: 1.2rem">&#xe78d;</span>
          <p>热门景点</p>
        </div>
        <div class="icon">
          <span class="iconfont" style="border-radius:.3rem;color: #fff;background-color: deeppink; font-size: 1.2rem">&#xe7b2;</span>
          <p>热门景点</p>
        </div>
        <div class="icon">
          <span class="iconfont" style="border-radius:.3rem;color: #fff;background-color: purple; font-size: 1.2rem">&#xe784;</span>
          <p>热门景点</p>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="icon">
          <span class="iconfont" style="border-radius:.3rem;color: #fff;background-color: red; font-size: 1.2rem">&#xe782;</span>
          <p>热门景点</p>
        </div>
        <div class="icon">
          <span class="iconfont" style="border-radius:.3rem;color: #fff;background-color: orangered; font-size: 1.2rem">&#xe6eb;</span>
          <p>热门景点</p>
        </div>
        <div class="icon">
          <span class="iconfont" style="border-radius:.3rem;color: #fff;background-color: darkgreen; font-size: 1.2rem">&#xe7ae;</span>
          <p>热门景点</p>
        </div>
        <div class="icon">
          <span class="iconfont" style="border-radius:.3rem;color: #fff;background-color: red; font-size: 1.2rem">&#xe781;</span>
          <p>热门景点</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  data () {
    return {
    }
  }
}
</script>

<style lang="stylus" scoped>
  .icons
    overflow: hidden
    height: 0
    margin-top: .1rem
    height: auto
    .icon
      float:left
      width: 25%
      text-align: center
      overflow: hidden
      background: #ffffff
      p
        text-align: center
</style>
